<template>
    <div class="alone-outBox f14">
        <div class="alone-topBox mb16">
            <div class="flex flex-warp flex_bt">

                <div class="flex flex-warp" style="align-items:center">
                    <div class="mb16">
                        <span>标签名称：</span>
                        <el-input v-model="searchObj.labelName" placeholder="请输入标签名称" class="width200 mr16" />
                    </div>
                    <div class="mb20">
                        <el-button @click="React">重置</el-button>
                        <el-button type="primary" @click="SearchListBt">筛选</el-button>
                    </div>
                </div>
                <div>
                    <el-button type="primary"  @click="dialogLabel=true;dialogTitle='添加标签';labeltitle='';deleteSpan=false"><i class="el-icon-plus" />添加标签</el-button>
                </div>
            </div>
        </div>

        <div class="tableBox">
            <!-- 表格 -->
            <el-table v-loading="loading" :data="DataTable" style="width: 100%" max-height="620">
                <el-table-column prop="id" label="序号" min-width="130" align="left"></el-table-column>
                <el-table-column prop="labelName" label="标签名称" min-width="130" align="left"></el-table-column>
                <el-table-column prop="videocount" label="关联视频" min-width="130" align="left"></el-table-column>
                <el-table-column prop="createDate" label="创建时间" min-width="130" align="left"></el-table-column>
  
                <el-table-column label="操作" align="center" min-width="220" fixed="right">
                    <template slot-scope="scope">
                        <el-button  type="text" class="mr10"
                            @click="editl(scope.row)">编辑</el-button>
                            <el-button  type="text" class="mr10"
                            @click="deletel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="alignRight">
                <Pagination :total="total" :page="searchObj.page" :limit="searchObj.limit" @pagination="paginations" />
            </div>
        </div>
        <!-- 新增标签 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogLabel" width="420px">
        <div>
            <div class="dia_label">标签名称:</div>
            <el-input v-model="labeltitle" placeholder="请输入标签名称"  maxlength="8" show-word-limit></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogLabel = false">取 消</el-button>
            <el-button v-if="dialogTitle=='添加标签'" type="primary" @click="addLabel()">确 定</el-button>
            <el-button v-if="dialogTitle=='编辑标签'" type="primary" @click="editLabel()">确 定</el-button>
            <el-button v-if="dialogTitle=='删除标签'" type="primary" @click="deleteLabel()">删 除</el-button>
        </span>
        <span v-show="deleteSpan" style="color:red"> 注：删除视频标签后，该视频标签类型将不会在品牌页进行展示，请谨慎操作</span>
        </el-dialog>
        
    </div>
</template>
<script>
import Pagination from '@/components/Pagination/index.vue'
import Cookies from 'js-cookie'
import indexapi from '@/api/index.js'

export default {
    components: {
        Pagination
    },
    data() {
        return {
            searchObj: {
                page: 1,
                limit: 10,
                labelName: ''
            },
            deleteSpan:false,
            labelid:0,
            dialogTitle:'',
            dialogLabel:false,
            labeltitle:'',
            total: 0,
            loading: false,
            DataTable: []
        }
    },
    mounted() {
        this.SearchList()
    },
    methods: {
        deletel(val) {
            this.dialogLabel=true
            this.dialogTitle='删除标签'
            this.labelid =val.id
            this.labeltitle = val.labelName
            this.deleteSpan=true
        },
        editl(val){
            this.dialogLabel=true
            this.dialogTitle='编辑标签'
            this.labelid =val.id
            this.labeltitle = val.labelName
             this.deleteSpan=false
        },
        deleteLabel(){
            let form={
                id:this.labelid
            }
            indexapi.video.deleteLabelById(form).then(res => {
                this.$message({ type: 'success', message: '删除成功！' })
                this.dialogLabel=false
                this.SearchList()
            })
        },
        editLabel(){
             if(this.labeltitle==''){
                this.$message({type:'error',message:'请输入标签名'})
                return false
            }
            let form={
                id:this.labelid,
                labelName:this.labeltitle
            }
            indexapi.video.updateLabelById(form).then(res => {
                this.$message({ type: 'success', message: '修改成功！' })
                this.dialogLabel=false
                this.SearchList()
            })
        }
        ,
        addLabel(){
            if(this.labeltitle==''){
                this.$message({type:'error',message:'请输入标签名'})
                return false
            }
            let form={
                labelName:this.labeltitle
            }
            indexapi.video.getSaLabel(form).then(res=>{this.$message({type:'seccess',message:'新增成功！'})
            this.dialogLabel=false
            this.SearchList()
         })
        },
        // 重置
        React() {
            this.searchObj = {
                page: 1,
                limit: 10,
                labelName: ''
            }
            this.SearchList()
        },
        // 查询
        SearchListBt() {
            this.searchObj.limit = 10
            this.searchObj.page = 1
            this.SearchList()
        },
        SearchList() {
            this.loading = true
            indexapi.video.getLabelPageList(this.searchObj).then((res) => {
                this.loading = false
                this.DataTable = res.data.records
                this.total = res.data.total
            })
           
        },
        // 分页
        paginations(val) {
            this.searchObj.limit = val.limit
            this.searchObj.page = val.page
            this.SearchList()
        },

    }
}
</script>
<style lang="scss" scoped>
.top_body {
    padding: 15px 16px;
    background: linear-gradient(180deg, #DDEEFF 0%, #F2F8FF 100%);
    font-size: 14px;
    color: #000000;
    line-height: 24px;
    margin-bottom: 16px;

    .title {
        font-size: 14px;
        font-weight: 600;
        color: #0c7ff2;
        line-height: 16px;
        margin-bottom: 3px;
    }
}

.ms_mg {
    font-size: 14px;
    font-weight: 600;
    // color: #000000;
    line-height: 16px;
    margin-top: 16px;
    margin-bottom: 8px;
}

.topButton {
    position: absolute;
    right: 20px;
    top: 16px;
}

.flex_bt {
    justify-content: space-between;
}

.mr10 {
    margin-right: 10px;
}

.icon_right {
    font-weight: 600;
    color: #0c7ff2;
    cursor: pointer;
    font-size: 18px;
}

.width120 {
    width: 120px !important;
}

::v-deep .el-dialog__footer {
    padding-top: 0px;
    // border-top: 1px solid #e5eaf0;
}

::v-deep .el-dialog__header {
    background: #f5f8fc;
    text-align: left;
    font-size: 16px;
    color: #202933;
    padding: 11px 16px;
}

::v-deep .el-dialog__body {
    padding: 0px 25px 25px !important;
}

::v-deep .el-dialog__title {
    font-size: 16px;
}

.checkreply_top {
    padding: 9px 0;
    border-bottom: 1px solid #E5EAF0;
    font-size: 14px;
    color: #000000;
    line-height: 24px;
    margin-bottom: 16px;

    .pr30 {
        padding-right: 30px;
    }
}

.content {
    font-size: 14px;
    color: #202933;
    line-height: 24px;
    margin-bottom: 16px;
}

.checkreply_body {
    padding: 16px;
    background: #F0F2F8;

    .body_top {
        @include flex(row, center, space-between);
        font-size: 14px;
        color: #7E8790;
        line-height: 24px;
        margin-bottom: 8px;

    }

    p {
        font-size: 14px;
        color: #202933;
        line-height: 24px;
    }
}
</style>
  